<template>
    <div class='main1'>
        <div class='bulletin'>
            <span>18点过后的订单到第二天8:00开始送</span>
            <i class='iconfont icon-arrow-right'></i>
        </div>
        <div class='floor'>
            <div class='floor-nav'>
                <ul>
                    <li :class="getCurrentNav1 == index?'showCurrentLi':''" :key='index' v-for='(item,index) in detailList' @click='getCurrentNav(index)'>
                        <div class='txt'>
                            <span>{{ item }}</span>
                        </div>
                    </li>
                </ul>
            </div>
            <div class='nav-detail'>
                <div class='detail-list' :key='key' v-for='(val,key) in detailList'>
                    <div class='category'>{{ val }}</div>
                    <!-- :class="isShow == key?'select':''" -->
                    <ul>
                        <!-- <li :key='index' v-for='(value,index) in dList' > -->
                        <li :key='indexs' v-for='(items,indexs) in dList'>
                            <div class='currentImg'>
                                <img :src='items.path' />

                            </div>
                            <div class='content'>
                                <div class='goods-name'>
                                    {{ items.title }}
                                </div>
                                <div class='sellgoods' v-html='items.count'>
                                    <!-- {{ items.count }} -->
                                </div>
                                <div class='goods-price'>
                                    <span><em>{{ items.price }}</em>/50g份</span>
                                    <div class='addorminus'>
                                        <div class='add'>-</div>
                                        <div class='count'>0</div>
                                        <div class='minus'>+</div>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import $ from 'jquery'
import axios from 'axios'
export default {
    name:'Order',
    data(){
        return {
            isShow:0,
            getCurrentNav1:0,
            detailList: ['  热销', '  K Coffee', '  桶', '  美味汉堡卷', '  吮指原味鸡','  热销', '  K Coffee', '  桶', '  美味汉堡卷', '  吮指原味鸡', '  鸡翅/鸡排', '  鸡翅/鸡排', '  小食/配餐', '  甜品/冰淇淋'],
            dList: [
                {
                    path: 'https://img.meituan.net/100.100.90/wmproduct/fe24e18d670442c94fcd044a0f747996135947.jpg',
                    title: '二块新奥尔良烤翅',
                    dir: '鲜嫩多汁，具烧烤香和甜辣味',
                    count:'月售&nbsp;6',
                    price: '¥11.5',
                    weight:'/500g'

                },
                {
                    path: 'https://img.meituan.net/100.100.90/wmproduct/fe24e18d670442c94fcd044a0f747996135947.jpg',
                    title: '二块新奥尔良烤翅',
                    dir: '鲜嫩多汁，具烧烤香和甜辣味',
                    count:'月售&nbsp;6',
                    price: '¥11.5',
                    weight:'/500g'

                },
                {
                    path: 'https://img.meituan.net/100.100.90/wmproduct/fe24e18d670442c94fcd044a0f747996135947.jpg',
                    title: '二块新奥尔良烤翅',
                    dir: '鲜嫩多汁，具烧烤香和甜辣味',
                    count:'月售&nbsp;6',
                    price: '¥11.5',
                    weight:'/500g'

                },
                {
                    path: 'https://img.meituan.net/100.100.90/wmproduct/fe24e18d670442c94fcd044a0f747996135947.jpg',
                    title: '二块新奥尔良烤翅',
                    dir: '鲜嫩多汁，具烧烤香和甜辣味',
                    count:'月售&nbsp;6',
                    price: '¥11.5',
                    weight:'/500g'

                },
            ],
            //获取ul对应的高度
            getH:[],
            count:0,
            recommend:[],
        }
    },
    methods:{
        getCurrentNav(index){
            // this.getCurrentNav1 = index;
            var that = this;
            // var Height1 = $('body').height();
            // var Height2 = $('.nav-detail').height();
            // var Height2 = $('.detail-list').eq(index).offset().top;
            var Height3 = $('.detail-list').eq(index).position().top;
            // $('.category').eq(index).offset(170,260);
            // var Height4 = $('.category').eq(index).scrollTop();
            // console.log(Height2);
            // console.log(Height3)
            var oldScroolTop = $('.nav-detail').scrollTop();
            // $('.nav-detail').scrollTop(oldScroolTop + Height3);
            $('.nav-detail').stop().animate({
                scrollTop:oldScroolTop + Height3
            },500,function(){
                that.getCurrentNav1 = index;
            })
            // console.log(Height2+oldScroolTop -264)
            // $('.nav-detail').scrollTop(Height3);
        }
    },
    computed:{
        
    },
    created(){
        // axios.get('/api/polist').then(function(res){
        //     console.log(res)
        // }).catch(function(err){
        //     console.log(err);
        // })

        // axios.get('http://localhost:3005/page').then(function(res){
        //     console.log(res)
        // }).catch(function(err){
        //     console.log(err)
        // })

        this.recommend = JSON.parse(window.localStorage.recommendList);
        console.log(this.recommend)
    },
    mounted(){

        var scroll = 0;
        var that =this;
        var length = this.detailList.length;
        var targetArr = $('.detail-list');
        var faNode = $('.nav-detail');
        var arr = [];
        for(var i=0;i<length;i++){
            arr.push(targetArr.eq(i).position().top)
        }

        // console.log(targetArr)
        $('.nav-detail').scroll(function(){
            scroll = faNode.scrollTop();
            // console.log(scroll);

            for(var i=0;i<length;i++){
                // console.log(targetArr.eq(i).position().top);
                if( scroll <= arr[i]+260){
                    that.getCurrentNav1 = i;
                    break;
                }
            }
            // if(scroll < 760){
            //     that.getCurrentNav1 = 0;
            // }else if(scroll < 1576){
            //     that.getCurrentNav1 = 1;
            // }

        })
    },
    // watch(){

        

    // }
}
</script>

<style lang="scss" scoped>
    @import '../../../static/hotcss/px2rem.scss';
    .main1{
        background-color: #fff;
        display: flex;
        height: px2rem(578*2);
        width: 100%;
        flex-direction: column;
        .bulletin{
            height: px2rem(88);
            padding: 0 px2rem(20) 0 px2rem(30);
            display: flex;
            justify-content: space-between;
            line-height: px2rem(88);

            span{
                font-size: px2rem(24);
                color: #656565;
            }
            i{
                font-size: px2rem(30); 
            }
        }
        .floor{
            flex: 1;
            display: flex;
            // height: 100%;
            // overflow: hidden;
            .floor-nav{
                width: px2rem(85*2);
                // background:red;
                height: 100%;
                // height: px2rem();
                overflow: auto;
                ul{
                    width: 100%;
                    font-size: px2rem(28);
                    color: #656565;
                    li{
                        height: px2rem(60*2);
                        width: 100%;
                        background-color: #CCC;
                        box-sizing: border-box;
                        padding: 0 px2rem(12);
                        // background: #CCC;
                        .txt{
                            height: 100%;
                            display: flex;
                            align-items: center;
                            border-bottom: px2rem(2) solid #bfbfbf;
                            padding-left: px2rem(16);
                            span{
                                text-align: left;
                                line-height: px2rem(34);
                            }
                        }
                    }
                    .showCurrentLi{
                        background-color: #FFF;
                    }
                }
            }
            .nav-detail{
                position: relative;
                flex: 1;
                // background-color: blue;
                height: 100%;
                // height: px2rem();
                overflow: auto;
                .detail-list{
                    .category{
                        height: px2rem(72);
                        box-sizing: border-box;
                        padding-left: px2rem(32);
                        position: relative;
                        text-align: left;
                        font-size: px2rem(26);
                        line-height: px2rem(72);
                        // display: none;
                        &::before{
                            content: '';
                            position: absolute;
                            width: 0;
                            height: px2rem(20);
                            border: px2rem(2) solid #FFD161;
                            left: px2rem(20);
                            top:50%;
                            margin-top:px2rem(-12);
                        }
                    }
                    // .select{
                    //     display: block;
                    // }
                }

                ul{
                    width: 100%;
                    box-sizing: border-box;
                    padding-left: px2rem(20);
                    // display: none;
                    li{
                        height: px2rem(90*2);
                        box-sizing: border-box;
                        padding: px2rem(30) 0 px2rem(20) 0;
                        border-bottom: px2rem(2) solid #f0f0f0;
                        display: flex;
                        text-align: left;
                        position: relative;
                        .currentImg{
                            width: px2rem(124);
                            height: px2rem(124);
                            img{
                                width: 100%;
                                height: 100%;
                            }
                        }
                        .content{
                            flex: 1;
                            box-sizing: border-box;
                            padding-left: px2rem(20);
                            .goods-name{
                                font-size: px2rem(32);
                                color: #2f2f2f;
                                text-align: left;
                            }

                        }
                        .sellgoods{
                            margin-top: px2rem(10);
                            font-size: px2rem(24);
                            color: #a9a9a9;
                            line-height: px2rem(30);

                        }
                        .goods-price{
                            margin-top: px2rem(6);
                            height: px2rem(41);
                            font-size: px2rem(24);
                            color: #A9A9A9;
                            
                            em{
                                font-size: px2rem(36);
                                color: #fe4d3d;
                            }
                            .addorminus{
                                width: px2rem(91*2);
                                height: px2rem(35*2);
                                position: absolute;
                                box-sizing: border-box;
                                padding-right: px2rem(20);
                                right: 0;
                                bottom: 0;
                                display: flex;
                                align-items: flex-start;
                                justify-content: flex-end;
                                .add{
                                    width:px2rem(50);
                                    height: px2rem(50);
                                    border-radius: 50%;
                                    border: px2rem(2) solid #eee;
                                    background-color:#FFF;
                                    font-size: px2rem(40);
                                    text-align: center;
                                    line-height: pc2rem(50);
                
                                }
                                .minus{
                                    width:px2rem(50);
                                    height: px2rem(50);
                                    border-radius: 50%;
                                    border: px2rem(2) solid #eee;
                                    background-color:orange;
                                    font-size: px2rem(40);
                                    text-align: center;
                                    line-height: pc2rem(50);
                                }
                                .count{
                                    width: px2rem(42);
                                    height: px2rem(27*2);
                                    font-size: px2rem(30);
                                    text-align: center;
                                    line-height: px2rem(54);


                                }
                            }
                        }
                    }
                }
                // .select{
                //     display: block;
                // }
                
            }
        }

    }
</style>
